---
name: Default Wrappers
order: 6
---

import { Playground, PropsTable } from 'docz'
import {h1} from './site/data/poc.js'
import Dante from './editor/components/Dante/Dante.js'
import {State, Toggle} from 'react-powerplug'

# Default Wrappers

Default wrapper classes for editor elements. This option is a mapping of block and className. 

This option is just for style the default elements with a top level class, let's say you need to add the html class ".custom-h1" to all your H1 elements.


```
{ className: 'graf--p', block: 'unstyled' },
{ className: 'graf--h2', block: 'header-one' },
{ className: 'graf--h3', block: 'header-two' },
{ className: 'graf--h4', block: 'header-three' },
{ className: 'graf--blockquote', block: 'blockquote' },
{ className: 'graf--insertunorderedlist', block: 'unordered-list-item' },
{ className: 'graf--insertorderedlist', block: 'ordered-list-item' },
{ className: 'graf--code', block: 'code-block' },
{ className: 'graf--bold', block: 'BOLD' },
{ className: 'graf--italic', block: 'ITALIC' }
```

## If you need to customize any element class , this is the place

<Playground>
  <Dante 
    content={h1}
    default_wrappers={[ 
      { className: 'my-custom-h1', block: 'header-one' } 
    ]}
  />
</Playground>